멀티라인, [CSS] ellipsis 두줄 이상에 줄임표시, 생략표시 적용 방법

css를 사용하여 텍스트가 매우 긴 경우 원하는 줄 만큼만 보여주는 방법에 대하여 알아봅니다. 또 생략표시(...)로 표기하는 방법도 같이 알아봅니다. 어떻게 하면 될까요?

! 언제 사용할까?

전체를 다 보여줄 수 없이 요약(?)해 보여주는 리스트 형태의 글에서는 원하는 줄 만큼만 보여주는 방법이 가장 많이 쓰입니다. 이 때 생각할 부분은 몇 줄까지만 보여줄지와 어떻게 구현할까 두 가지 입니다. 생각할 수 있는 몇 가지 방법을 알아봅니다.

# 멀티라인... 두 줄의 이상의 텍스트에 생략기호를 적용하는 방법

가장 효과적인 방법으로 생략 기호를 적용하는 방법을 생각할 수 있습니다. 바로 css에 text-overflow: ellipsis 스타일 속성을 적용하는 방법이죠. 하지만 만약 한 줄이 아닌 경우에는 적용하기 어렵습니다. 그래서 다른 방법이 필요한데 해결 방법은 무엇이 있을까요?

text-ellipsis 더 알아보기 >
https://webisfree.com/2015-08-17/[css]-text-overflow-텍스트가-많은-경우-생략기호로-보여주기


1. 크롬 등의 웹킷(Webkit) 엔진의 브라우저에 적용하는 방법
먼저 크롬 등의 웹킷에만 적용 가능한 방법이 있습니다. 바로 아래와 같이 스타일 속성을 적용하는 방법입니다. 예를들어 5줄까지만 보여주려면 아래와 같이 적용하여 사용합니다.

위에서 사용된 css 속성 -webkit-line-clamp의 값이 있죠. 이 값을 적용하면 원하는 라인의 개수 만큼 보여주고 나머지는 생략기호로 나타나게 됩니다. display: -webkit-box; 등의 나머지 값들도 함께 설정해야 하니 참고하세요.

-webkit-line-clamp: 출력 할 라인 수


매우 유용한 방법이나 단점은 역시 webkit 엔진에만 사용 가능하다는 점입니다. 이처럼 크로스 브라우징에 이슈가 있으나 가장 간단한 방법이면서 마지막 텍스트 뒤에 생략기호로 표시되는 장점이 있죠.

그럼 이 값을 적용하기 이 전 그리고 이 후 어떻게 달라지는지 아래에서 확인해보겠습니다. 3줄만 나타내려고 합니다.

@ 적용 전

@ 적용 후

위에 적용 후의 모습을 보면 생략기호로 나타났고 3줄만 출력된 모습을 볼 수 있습니다. 아래는 적용된 css 값입니다.

여기까지 웹킷 엔진에서 사용 가능한 생략 표시 및 원하는 줄까지만 보여주는 방법을 알아봤습니다. 참고로 이 외에 어떤 방법을 생각할 수 있을까요? 이런 고민은 역시 다른 브라우저... 특히 IE에 적용하기 위한 방법을 생각하기 위해서죠...

일단 생략기호가 없어도 된다면 IE에서는 높이값을 설정해서 가능합니다. 즉 3줄만 보여줄 때 한 줄의 높이가 20px이라고 가정하면 60px로 높이만 적용하면 되죠. 단, 생략기호로 표시되는 건 아쉽지만 IE에서는 어쩔 수 없겠죠 ~

! 자바스크립트를 사용하여 구현하기, -webkit-line-clamp

그리고 자바스크립트를 사용할 수 있을텐데요 ... 이 방법을 사용한 코드를 다음에 작성하도록 하겠습니다.